<template>
<view>
  <u-navbar title="保养列表" :is-back="false" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
  <view
      class="sticky z-4"
      id="container"
      :style="{top:`${top}px`}"
  >
    <u-tabs
        :bold="false"
        :current="tabsCurrent"
        :is-scroll="false"
        :list="list"
        active-color="#2D8CF0"
        bar-height="10"
        :bar-width="barWidth"
        duration="0"
        @change="change"
    ></u-tabs>
    <u-line
        color="#CCCCCC"
        length="94%"
        margin="-5rpx 0 0 20rpx"
    />
  </view>
  <maintenance-unassigned v-if="tabsCurrentName === '待分配' " ref="listComponent" :isManagerOrAdmin="isManagerOrAdmin"></maintenance-unassigned>
  <maintenance-undone v-else-if="tabsCurrentName === '待完成' " ref="listComponent" ></maintenance-undone>
  <maintenance-done v-else-if="tabsCurrentName === '已完成' " ref="listComponent" ></maintenance-done>
  <maintenance-all v-else-if="tabsCurrentName === '全部工单' " ref="listComponent" :isManagerOrAdmin="isManagerOrAdmin"></maintenance-all>

  <CustomUTabbar></CustomUTabbar>
</view>
</template>

<script>
import CustomUTabbar from '../components/CustomUTabbar'
import getNavBarHeight from "@/mixins/getNavBarHeight";
import MaintenanceUnassigned from "./components/MaintenanceUnassigned";
import MaintenanceDone from "./components/MaintenanceDone";
import MaintenanceUndone from "./components/MaintenanceUndone";
import MaintenanceAll from './components/MaintenanceAll';

export default {
  mixins:[getNavBarHeight],
  components:{CustomUTabbar,MaintenanceUnassigned,MaintenanceDone,MaintenanceUndone,MaintenanceAll},
  data() {
    return {
      tabsCurrent: 1,
      //标签下方滑块宽度
      barWidth:'',
      list: [],
      isManagerOrAdmin:false,
      tabsCurrentName: '待完成',
    }
  },
  onShow(){
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
    if(this.$store.getters.isFromHome2Work && this.$store.getters.tabsCurrent !== this.tabsCurrent){
      this.tabsCurrent = this.$store.getters.tabsCurrent
    }
    if(this.list.length===0){
      //是否驻场经理或管理员
      this.isManagerOrAdmin = this.$auth.hasRoleOr(['manager','admin','co-admin'])
      const isEngineer = this.$auth.hasRole('engineer')
      const isNurse = this.$auth.hasRoleOr(['head-nurse','nurse'])
      const allWorkOrderList = this.$auth.hasPermiOr(['inspection:task:list', 'inspection:workOrder:list'])
      const selfWorkOrderList = this.$auth.hasPermiOr(['inspection:task:assignSelf', 'inspection:workOrder:assignSelf'])
      if(allWorkOrderList){
        this.barWidth = 130
        this.list = [{ name: "待分配"},{name: "待完成"},{name: "已完成"},{name: "全部工单"}]
      }else if(selfWorkOrderList && isEngineer){ //工程师能看到待完成、已完成列表
        this.barWidth = 350
        this.tabsCurrent = 0
        this.list = [{name: "待完成"},{name: "已完成"}]
      }else if(allWorkOrderList && isNurse){
        this.list = []
        this.tabsCurrentName = '已完成'
      }
    }
    this.tabsCurrentName = this.list[this.tabsCurrent]?.name || '待完成'
  },
  onHide(){
    this.tabsCurrentName = ''
  },
  onReachBottom(){
    this.$refs.listComponent.reachBottom();
  },
  methods:{
    //切换tab
    change(index) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      })
      this.tabsCurrent = index;
      this.tabsCurrentName = this.list[index].name
    },
  }
}
</script>


<style lang="scss">
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}
/deep/.u-flex{
  border: 2rpx solid #2D8CF0;
  border-radius: 5rpx;
  width: 180rpx;
  display: flex;
  justify-content: space-evenly;
}
/deep/.u-dropdown__menu__item__text{
  font-size: 30rpx !important;
  line-height: 60rpx !important;
  white-space: nowrap;
  overflow: hidden;
}
/deep/ .u-checkbox{
  width: 100% !important;
  display: flex !important;
}
/deep/ .u-checkbox__label{
  flex: 1 !important;
}
/deep/.uicon-arrow-down-fill{
  color: #2D8CF0 !important;
}
</style>
